<!DOCTYPE html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>uncleXu</title>
<link href="#" rel="">
<link rel="stylesheet" href="__PUBLIC__/Home/css/style.css" media="screen" type="text/css">
<script type="text/javascript" src="__PUBLIC__/Home/js/jquery.js"></script>
	<style>
		h1 {
			font-size: 19px;
			text-align: center;
			margin: -5px;
		}
		h2{
			text-align: center;
			margin-top: 10px;
		}
		h3 {
			text-align: center;
			font-size: 10px;
		}

		#main {
			height: 400px;
			width: 400px;
			border: 1px solid black;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
			background: white;
		}

		#main1 {
			height: 400px;
			width: 100%;
			position: relative;
			top: -100px;
		}

		.row {
			height: 25%;
			width: 400px;

		}

		.cill {
			height: 100px;
			width: 100px;
			float: left;
		}

		.black {
			background: black;
		}

		input{
			height: 30px;
			width:80px;
			display: block;
			margin: 20px auto;
		}
	</style>
</head>
<body>
<header class="mod-head">
	<h1 class="mod-head__title"><a href="{:U('Home/Index/index')}">uncle Xu</a></h1>
	<div class="mod-head__logo">
		<a href="{:U('Home/Index/index')}">
			<img class="avatar" src="__PUBLIC__/Home/images/avatar.jpg" alt="" width="26" height="26">
		</a>
	</div>
	<nav class="mod-head__nav">
		<ul  class="mod-head__ul">
			<li  class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-14">
				<a href="{:U('Home/About/about')}">关于我</a><span>·</span></li>
			<li  class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-5 current_page_item menu-item-14">
				<a href="{:U('Home/Blog/blist')}">博客</a><span>·</span></li>
			<li  class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23">
				<a href="{:U('Home/Game/game')}">游戏</a></li>

		</ul>
	</nav>
</header><article class="mod-post mod-post__type-page">
	<header>
		<h1 >别踩白块</h1>
	</header>
			<div class="mod-post__entry">
				<h1 id="h1">0</h1>
				<div id="main">
					<div id="main1">
					</div>
				</div>
				<input  type="submit" id="st" style="background: black;color: #fff;border-radius: 3px;border: 1px solid black " value="开始游戏" >
				
				<h1>制作者:姓徐的</h1>
				<h1 style="font-size: 13px">v1.03</h1>
		</div>
	</article>

<footer class="mod-footer" role="contentinfo" id="footer_in">
    <p class="f_bq"> </p>
</footer>
<script type="text/javascript" src="__PUBLIC__/Home/js/comment-reply.js"></script>
</body></html>
<script>
	var speed = 2;
	var clock = null;
	var status = 0; //1开始  2暂停 3 结束;

	console.log('姓徐的的第一个JS小程序 别踩白块');
	//$简单方法找出ID
	function $(id) {
		return document.getElementById(id);
	}
	var main1 = $('main1');
	function cdiv(classname) {
		var div = document.createElement('div');
		div.className = classname;
		return div;
	}
	//    创建一行row 并包含四个cill
	function crow() {
		//创造一行div
		var row = cdiv('row');
		//将创造好的四个cill类名取出来
		var black = cblack();
		//将这四个类名取出来 并添加到row div里面
		for (var i = 0; i < 4; i++) {
			var cill = cdiv(black[i]);
			row.appendChild(cill);
		}
		//将row div添加到main1里面 
		if (main1.firstChild == null) {
			main1.appendChild(row);
		} else {
			main1.insertBefore(row, main1.firstChild);
		}
	}


	//    创建随机cill black
	function cblack() {
		var arr = ['cill', 'cill', 'cill', 'cill'];
		var x = Math.floor(Math.random() * 4);
		arr[x] = 'cill black';
		return arr;
	}

	//    初始化
	function into() {
		for (var i = 0; i < 4; i++) {
			crow();
		}
	}

	//移动main1  main css设置有100px藏在浏览器上面  往下移动 当移动到top=0的时候 将创造另一行row
	function move() {
		var top = parseInt(window.getComputedStyle(main1, null)['top']);
		if(top >0){
			top=0;
		}
		main1.style.top = top + speed + 'px';
		//创造另一行row 但是太突兀了 不连贯 突然增加了100px  所以往上拉100px
		if (top == 0) {
			crow();
			main1.style.top = '-100px';  //网上拉了100px  当top=0 重新创造新的一行
			main1.removeChild(main1.lastChild);
		}
		//第三个判断 一下最后一个DIV里面有没有1
		//第一判断 判断有没有5个row 防止开始的时候就报错误
		//第二个判断 因为main1边框还有一部分在Main里面 所以判断一下保证挨到边框才判断
		if (main1.children.length==5&&main1.style.top == -100+speed+'px'&&main1.lastChild.pass !== 1) {
			status =3;
			state();
		}
	}

	//点击变颜色 加分
	function go(){
		main1.onclick  =  function (ev) {
			if (ev.target.className.indexOf('black') == -1) {
				ev.target.style.background = 'red';
				status =3;
				state();
			} else {
				ev.target.className = 'cill';
				ev.target.parentNode.pass = 1;
				//加分
				$('h1').innerHTML = parseInt($('h1').innerHTML) + 1;
				if($('h1').innerHTML % 20 == 0){
					run();
				}
			}
		}
	}
	//启动
	function start() {
		clock = setInterval('move()',18);
	}

	function br(){
		clearInterval(clock);
		main1.onclick = '';
	}

	function end(){
		clearInterval(clock);
		alert('游戏结束' + '    总得分:' + $('h1').innerHTML + '分.');
		main1.onclick = '';
	}



	$('st').onclick = function(){
		if($('st').value=='开始游戏'){

			status = 1;
			$('st').value='暂停';
			state();
			return;
		}

		if($('st').value=='暂停'){
			status = 2;
			$('st').value='继续';
			state();
			return;
		}
		if($('st').value=='继续'){
			status = 1;
			$('st').value='暂停';
			state();
			return;
		}
		if($('st').value=='重新开始'){
			window.location.reload(true);
		}
		
	}

	function run(){
		if(speed==2){
			speed=3;
		}else if(speed==3){
			speed=4;
		}else if(speed==4){
			speed=5;
		}else if(speed == 6){
			alert('可以的');
		}
	}

	function state(){
		if(status == 0){
			into();
			main1.onclick = '';
		}
		if(status == 1){
			start();
			go();
		}
		if(status == 2){
			clearInterval(clock);
			main1.onclick = '';
		}
		if(status == 3){
			end();
			$('st').value='重新开始';
		}
	}
	state();
</script>
